<template>
	<div class="main-content">
		<ToolBar>
			<el-button style="float:left;" type="primary" icon="el-icon-plus" size="small" @click="editUser(false)">添加</el-button>
			<div style="float: right">
				<el-input placeholder="请输入用户昵称！" size="small" style="width: 200px" v-model="params.name" @clear="searchUser"
				 clearable>
				</el-input>
				<el-button @click="searchUser" type="success" icon="el-icon-search" size="small"></el-button>
			</div>
		</ToolBar>

		<el-table :data="usersData" border highlight-current-row ref="table" height="calc(100% - 90px)">
			<el-table-column fixed="left" type="index" label="序号" width="50" align="center">
			</el-table-column>			
			<el-table-column prop="userAccount" label="账号" align="center">
			</el-table-column>
			<el-table-column prop="nickname" label="昵称" :show-overflow-tooltip="true" align="center">
			</el-table-column>
			<el-table-column prop="name" label="姓名" align="center">
			</el-table-column>
			<!-- <el-table-column prop="age" label="年龄"  width="60" >
			</el-table-column> -->
			<el-table-column prop="gender" :formatter="genderFormatter"  label="性别" width="80" align="center">
			</el-table-column>
			<el-table-column prop="email" label="邮箱" :show-overflow-tooltip="true" align="center">
			</el-table-column>
			<el-table-column prop="mobile" label="手机号" :show-overflow-tooltip="true" align="center">
			</el-table-column>
			<!-- <el-table-column prop="wechat" label="微信" :show-overflow-tooltip="true">
			</el-table-column> -->
			<el-table-column prop="departmentId" :formatter="departmentFormatter" label="部门" align="left">
			</el-table-column>
			<el-table-column prop="remarks" label="描述" width="200" :show-overflow-tooltip="true" align="center">

			</el-table-column>
			<el-table-column prop="enable" width="100" label="是否启用" align="center">
				<template slot-scope="scope">
					<el-switch size="small" @change="enableSwitch(scope.row)" v-model="scope.row.enable" active-color="#13ce66"
					 inactive-color="#ff0000">
					</el-switch>
				</template>
			</el-table-column>

			<el-table-column label="操作"  width="180" align="center">
				<template slot="header" slot-scope="scope">
					<HelpHint content="重置密码为123456 / 编辑用户 / 删除或恢复用户" >操作</HelpHint>
				</template>
				<template slot-scope="scope">
					<el-button @click="resetting(scope.row.id)" type="warning" style="transition: .4s;" :ref="scope.row.id" icon="el-icon-refresh"
					 size="small" circle></el-button>
					<el-button @click="editUser(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
					<el-tooltip class="item" v-if="scope.row.delete == false" effect="dark" content="删除用户" placement="top-end">
						<el-button @click="deleteUser(scope.row.id)" type="danger" icon="el-icon-delete" circle size="small"></el-button>
					</el-tooltip>
					<el-tooltip class="item" v-else effect="dark" content="恢复用户" placement="top-end">
						<el-button @click="deleteUser(scope.row.id)" icon="el-icon-check" circle size="small"></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="pageNum"
		 :page-sizes="[5, 10, 20, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog v-dialogDrag :title="titile" height="400px" :close-on-click-modal="false" :close-on-press-escape="false"
		 :visible.sync="dialogFormVisible" size="mini">
			<el-form :model="currentUser">
				<el-row>
					<el-col :span="12">
						<el-form-item label="帐号" :label-width="formLabelWidth">
							<el-input v-model="currentUser.userAccount" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="电话" :label-width="formLabelWidth">
							<el-input v-model="currentUser.mobile" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="呢称" :label-width="formLabelWidth">
							<el-input v-model="currentUser.nickname" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="邮箱" :label-width="formLabelWidth">
							<el-input v-model="currentUser.email" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="姓名" :label-width="formLabelWidth">
							<el-input v-model="currentUser.name" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="微信" :label-width="formLabelWidth">
							<el-input v-model="currentUser.wechat" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="性别" :label-width="formLabelWidth">
							<el-select v-model="currentUser.gender" placeholder="请选择性别">
								<el-option v-for="(value, key) in genderMap" :key="key" :label="value" :value="key">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="生日" :label-width="formLabelWidth">
							<!-- <el-input v-model="currentUser.birthday" autocomplete="off"></el-input> -->
							<el-date-picker v-model="currentUser.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date"
							 placeholder="选择生日">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="24">
						<el-form-item label="部门" :label-width="formLabelWidth">
							<elTreeSelect
							  :props="props"
							  :options="treeOptionData"
							  :value="currentUser.departmentId"
							  :clearable="isClearable"
							  :accordion="isAccordion"
							  @getValue="getValue($event)"
							>
							</elTreeSelect>
						</el-form-item>						
					</el-col>
				</el-row>
				
				
				<el-form-item size="small" label="是否启用:" :label-width="formLabelWidth">
					<el-col :span="24">
						<el-switch :disabled="dialogFormReadOnly" style="float: left;height: 32px;" v-model="currentUser.enable"
						 active-color="#13ce66" inactive-color="#ff0000">
						</el-switch>
					</el-col>
				</el-form-item>

				<!-- <el-form-item label="是否启用" :label-width="formLabelWidth">
					<el-select v-model="currentUser.enable" placeholder="请选择用户状态">
						<el-option label="启用" :value="true"></el-option>
						<el-option label="禁用" :value="false"></el-option>
					</el-select>
				</el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveUser">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>


<script>
	import ToolBar from '@/components/ToolBar.vue';
	import HelpHint from '@/components/HelpHint.vue';
	import elTreeSelect from "../../components/treeSelect.vue";
	import {
		setPageSize,
		getPageSize
	} from '../../utils/dataStorage'
	import {
		dictionaryMap
	} from '../../api/dictionary';
	import {
		save,
		deleteById,
		resetPassword,
		enableSave,
		findById,
		list
	} from '../../api/user';

	import {
		departmentTree,
		departmentMap
	} from '../../api/department';

	export default {
		data() {
			return {
				titile: "用户信息",
				params: {
					name: '',
				},
				pageSize: getPageSize() || 10,
				pageNum: 1,
				total: 0,
				usersData: [],
				treeOptionData:[],
				currentUser: {},
				dialogFormVisible: false,
				dialogFormReadOnly: false,
				formLabelWidth: '120px',
				genderMap: null,
				departmentList:[],
				isClearable: false, // 可清空（可选）
				isAccordion: true, // 可收起（可选）
				props: {
				  // 配置项（必选）
				  value: "id",
				  label: "shortName",
				  children: "children"
				  // disabled:true
				},
				departmentValueId:null
			}
		},
		created: function() {
			dictionaryMap('GENDER').then(data => {
				if (data) {
					this.genderMap = data;
				}
			}).catch(exception => {
	
			});
			
			departmentMap({departmentName:''}).then(data => {
				if (data) {
					this.departmentList = data;
				}
			}).catch(exception => {
				console.log(exception);
			});			
		},
		mounted: function() {
			this.loadUserList();
			this.loadDepartmentTree();
		},
		methods: {
			loadUserList: function() {
				list({
					name: this.params.name,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(data => {
					this.usersData = data.content;
					this.total = data.totalElements;
					// data.forEach(function(menu) {
					// 	console.log(JSON.stringify(menu));
					// });
				}).catch(exception => {
	
				});
			},
			loadDepartmentTree: function() {
				departmentTree({
					departmentName: ''
				}).then(data => {
					this.treeOptionData = data;
			
				}).catch(exception => {
			
				});
			},
			getValue(value) {
				this.currentUser['departmentId'] = value;
			  this.departmentValueId = value;
			  console.log(this.departmentValueId);
			},
			handleSizeChange: function(size) {
				setPageSize(size);
				this.pageSize = size;
				this.loadUserList();
			},
			handleCurrentChange: function(currentPage) {
				this.pageNum = currentPage;
				this.loadUserList();
			},
			searchUser() {
				this.loadUserList();
			},
			enableSwitch(data) {
				this.currentUser = JSON.parse(JSON.stringify(data));
				enableSave(this.currentUser).then(res => {
					this.usersData.forEach((user, index) => {
						if (user.id == res.id) {
							this.usersData.splice(index, 1, res);
							this.currentUser = res;
							this.$message({
								message: '保存成功!',
								type: 'success'
							});
						}
					});
				}).catch(exception => {});
			},
			editUser(data) {
				if (data != false) {
					this.currentUser = JSON.parse(JSON.stringify(data));
				} else {
					this.currentUser = {};
				}
				this.dialogFormVisible = true;
			},
			UploadUser(data) {
	
			},
			saveUser() {
				this.dialogFormVisible = false;
				save(this.currentUser).then(res => {
					var isEdit = false;
					this.usersData.forEach((user, index) => {
						if (user.id == res.id) {
							isEdit = true;
							this.usersData.splice(index, 1, res);
							// for (var key in user) {
							// 	user[key] = res[key];
							// }
							this.currentUser = res;
						}
					});
					this.$message({
						message: '保存成功!',
						type: 'success'
					});
					if (isEdit == false) {
						this.loadUserList();
					}
					this.dialogFormVisible = false;
				}).catch(exception => {
	
				});
				console.log(JSON.stringify(this.currentUser));
			},
			deleteUser(id) {
				deleteById(id).then(res => {
					this.$message({
						message: '删除成功!',
						type: 'success'
					});
					this.loadUserList();
				}).catch(exception => {
	
				});
			},
			resetting(id) {
				resetPassword(id).then(res => {
					this.usersData.forEach((user, index) => {
						if (user.id == res.id) {
							this.usersData.splice(index, 1, res);
							this.currentUser = res;
						}
					});
					this.$message({
						message: '已经成功重置密码',
						type: 'success'
					});
				}).catch(exception => {
	
				});
			},
			departmentFormatter:function(row, column){
				let obj = this.departmentList.find((item) => {
					return item['id'] == row['departmentId']; //筛选出匹配数据
				});	
				if(obj){
					return obj['shortName'];
				}
				return '';
			},
			genderFormatter:function(row, column){
				if(this.genderMap){
					return this.genderMap[row['gender']]; 
				}
				return '';
			}
		},
		components: {
			ToolBar,
			HelpHint,
			elTreeSelect
		}
	}
</script>
<style lang="scss">

</style>
